/*************************************************************
OPTIONS_SLIDER.JS
*************************************************************/


	jQuery(document).ready(function($) {
	});


/*************************************************************
MAIN

	INIT SORTABLE
	FUNCTION: DYNAMIC TO STATIC
	FUNCTION: STATIC TO DYNAMIC
	ADD SLIDES
	DELETE SLIDES
	OPEN/CLOSE
	EXPAND/COLLAPSE ALL
	SELECT SLIDE
	POST SELECT AUTOFILL
	SLIDER UPLOAD SCRIPT


*************************************************************/

	jQuery(document).ready(function($) {


	/*************************************************************
	INIT SORTABLE
	*************************************************************/

		$('#slides').sortable ({
			placeholder: 'sortable_placeholder',
			update: sliderUpdateIndexes,
		});

		function sliderUpdateIndexes (event, ui) {

			var liSelector = ".slide";
			var optionsClass = ".slide_option";
			var splitPos = 2; // when splitting the name attr select which fragment to update

			var liIndex = 0;
			var optionNameArray = new Array();
			var $list_lis = $(liSelector);
			$list_lis.each(function (index, element) {
				var $this = $(this);
				var liIndex = index;
				//console.log(liIndex);
				var $options = $this.find(optionsClass);
				$options.each(function (index, element) {
					var $thisOption = $(this);
					//update option name (make sure it only updates numbers in 2nd bracket)
					var optionName = $thisOption.attr('name');
					var optionNameArray = optionName.split('[');
					optionNameArray[splitPos] = liIndex+"]";

					optionName = optionNameArray.join('[');
					// console.log(optionName);
					$thisOption.attr('name',optionName);
					//console.log($thisOption.attr('name'));
				});
			}); 

		}


	/*************************************************************
	ADD SLIDES
	*************************************************************/

		$('#slider_control .add_slide_button').on('click', function(event){
			event.preventDefault();
			$this = $(this);
			var slideType = $this.val();

			$templateSlide = $('#slide_templates li.' + slideType);
			$currentSlide = $('#slides li.current_slide');

			if ($currentSlide.size() > 0) {
				$templateSlide.clone().insertBefore($currentSlide);
			} else {
				$templateSlide.clone().appendTo($('#slides'));
			}

			sliderUpdateIndexes();

		});

	/*************************************************************
	DELETE SLIDES
	*************************************************************/

		$('#slider_control .del_slide_button').on('click', function(event){

			event.preventDefault();
			$this = $(this);

			$currentSlide = $('#slides li.current_slide');

			if ($currentSlide.size() > 0) {
				var conf = confirm("WARNING: You are about to delete a slide!");
				if (conf === true) {
					$currentSlide.remove();

					sliderUpdateIndexes();
				}
			}

		});

	/*************************************************************
	OPEN/CLOSE
	*************************************************************/

		//init state
		$('#slides li').each(function (i) {
			$this = $(this);
			var status = $this.find('#slide_status').val();
			if (status == "closed") $this.find('.slide_content').hide();
		});


		$('#slides').on('click', 'li .slide_head h3', function() {
			$this = $(this);
			$inputStatus = $this.closest('li').find('#slide_status');
			var status = $inputStatus.val();
			if (status == "closed") {
				$inputStatus.val('open');
			} else {
				$inputStatus.val('closed');
			}
			$this.closest('li').find('.slide_content').slideToggle(300);
		});

	/*************************************************************
	EXPAND/COLLAPSE ALL
	*************************************************************/

		$('#slider_control .expand_all_button').on('click', function(event){
			event.preventDefault();
			$('#slides li').each(function() {
				$this = $(this);
				$inputStatus = $this.find('#slide_status');
				$inputStatus.val('open');
				$this.find('.slide_content').slideDown(300);
			});
		});

		$('#slider_control .collapse_all_button').on('click', function(event){
			event.preventDefault();
			$('#slides li').each(function() {
				$this = $(this);
				$inputStatus = $this.find('#slide_status');
				$inputStatus.val('closed');
				$this.find('.slide_content').slideUp(300);
			});
		});


	/*************************************************************
	SELECT SLIDE
	*************************************************************/

		$('#slides').on('click', 'li', function() {
			$this = $(this);

			//first remove all current_slide classes
			$('#slides li').each(function () {
				$thisSlide = $(this);
				$thisSlide.removeClass('current_slide');
			});
			//then add to selected
			$this.addClass('current_slide');
		});

	/*************************************************************
	POST SELECT AUTOFILL
	*************************************************************/

			// var selectValue = $('#page_template option[selected="selected"]').val();
			// if (typeof selectValue != 'undefined') {
			// 	selectValue = selectValue.split('.');
			// 	$('.option_' + selectValue[0]).show();
			// } else {
			// 	$('.option_default').show();
			// }

			//on change
			$('#slides').on('change', '#slide_post_select', function () {
				$this = $(this); //refers to the select 
				//first get value
				var selectValue = $this.val();
				//now get option with this value and get data
				$selectedOption = $('#slide_post_select option[value="'+selectValue+'"]');
				var postImageUrl = $selectedOption.attr('data-image_url');
				var postTitle = $selectedOption.attr('data-title');
				var postLink = $selectedOption.attr('data-link');
				var postContent = $selectedOption.attr('data-content');

				//set values of slide
				$currentSlide = $this.closest('li');
				$currentSlide.find('.slide_thumb img').attr('src',postImageUrl);
				$currentSlide.find('#slide_image_url').val(postImageUrl);
				$currentSlide.find('#slide_title').val(postTitle);
				$currentSlide.find('#slide_link').val(postLink);
				$currentSlide.find('#slide_text').html(postContent);

			});

	/*****************************************
	SLIDER UPLOAD SCRIPT
	*****************************************/

	//if you make an input type='button' with the class='upload_button_slider' then this script will activate it and put the image URL in the previous input box
			
			if ($('.upload_button_slider').size() > 0) {

				$('#slides').on('click', '.upload_button_slider', function () {
					var $this = $(this);
					var $urlField = $this.prev('input');
					var buttonVal = $this.val().toUpperCase();
					var $assocSlideThumbImg = $this.closest('.slide_options').prev('.slide_thumb').find('img');

			        tb_show(buttonVal, 'media-upload.php?referer=boost_default&type=image&TB_iframe=true&post_id=0', false);
			        
					window.send_to_editor = function(html) {
						if (typeof $urlField != "undefined") {
						    var image_url = $('img',html).attr('src');  
						   	$urlField.val(image_url); 
						   	$assocSlideThumbImg.attr('src', image_url);
						    tb_remove();  
						}
					};
				});

			}


	});


